<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        /*
        需求：当用户点击了校验按钮，要获取输入框里的内容，然后验证其是否合法
        验证的规则是：必须由字母数字下划线组成，并且长度是5到12位
         */

        function onclickFun(){
            //1 当我们要操作一个标签的时候，一定要获取标签对象
            var usernameObj = document.getElementById("username");
            //[object HTMLInputElement] -- dom对象
            var userNameValue = usernameObj.value;

            //如何验证 字符串 符合某些规则，需要使用正则表达式
            var patt = /^\w{5,12}$/;

            /*
             * test()方法用于测试某个字符串，是不是匹配我的规则

             */

            var userNameSpan = document.getElementById("userNameSpan");

            if(patt.test(userNameValue)){
                // alert("用户名合法!");
                // userNameSpan.innerHTML = "用户名合法";
                userNameSpan.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            }else{
                // alert("用户名不合法!");
                // userNameSpan.innerHTML = "用户名不合法";
                userNameSpan.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }


        }

    </script>
</head>
<body>

    用户名：<input type="text" id="username">
    <span id="userNameSpan"></span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>